<template>
	<view class="new-page">
		<!-- 使用 MyTabs 组件并传递参数 -->
		<MyTabs :tabs="myTabsData.tabs" v-model:currentTab="myTabsData.currentTab" :tabMessages="myTabsData.tabMessages"
			:notifications="myTabsData.notifications" @tab-change="handleTabChange" />

		<!-- 传递给 listdta 组件的数据 -->
		<view class="ceshi">
			<view :current-state="currentSelectedState">
				<!-- 在这里直接处理数据显示，不再传入子组件 -->
				<view v-if="myTabsData.currentTab === 0">
					<view v-for="(item, index) in customerDynamicDataArray" :key="index" class="box"
						@click="gotushijian(item)">
						<view class="top">
							<view class="touxiang">
								<image style="width: 100%; height: 100%; border-radius: 50%;" src="/static/xiaoxi.png"
									mode="aspectFill" />
							</view>
							<view class="box_text">
								<view class="text_top">
									<view style="font-weight: bold; font-size: 24rpx; color: #222222;">
										<!-- 使用可选链操作符（?.）来更安全地访问对象属性，避免因属性不存在导致报错 -->
										{{ item.customerName || '无姓名' }}
									</view>
									<view class="bumen">
										{{ item.department || '无部门' }}
									</view>
								</view>
								<view class="text_button">
									{{ item.company || '无公司' }}
								</view>
							</view>
						</view>
						<view class="huifu">
							<view style="font-weight: 400; font-size: 24rpx; color: #999999; margin: 30rpx 0 18rpx 0;">
								回复了你：{{ item.reply || '暂无回复' }}
							</view>
						</view>
						<view class="tiwen">
							提问:{{ item.question || '无提问内容' }}
						</view>
						<view style="height: 3rpx; width: 100%; background-color: #DDDDDD; margin-top: 20rpx;"></view>
						<view class="date">
							回复时间：{{ item.replyTime || '无回复时间' }}
						</view>
					</view>
				</view>
				<view v-if="myTabsData.currentTab === 1">
					<view v-for="(item, index) in taskMessageDataArray" :key="index" class="box_xxi">
						<view class="top_bt">
							<text style="font-weight: bold; font-size: 30rpx; color: #222222;">
								{{ item.person || '无相关人员' }}
							</text>
							<text style="margin-left: 20rpx;">终止了任务</text>
							<text style="color: #3278FF; font-weight: 400; font-size: 28rpx;">
								“{{ item.taskName || '无任务名称' }}"
							</text>
						</view>
						<view style="margin-top: 20rpx; font-weight: 400; font-size: 24rpx; color: #999999;">
							{{ item.time || '无时间记录' }}
						</view>
					</view>
				</view>
				<view v-if="myTabsData.currentTab === 2">
					<view v-for="(item, index) in projectMessageDataArray" :key="index" class="ProjectMessages">
						<view class="topxmxi">
							<view style="display: flex; align-items: center;">
								<view class="logo">
									<image style="width: 100%; height: 100%; border-radius: 50%;"
										src="/static/xiaoxi.png" mode="aspectFill" />
								</view>
								<view class="biaoT">
									{{ item.projectName || '无项目名称' }}
								</view>
							</view>
							<view class="datesj">
								{{ item.time || '无时间记录' }}
							</view>
						</view>
						<view style="height: 2rpx; background-color: #EEEEEE; width: 100%; margin: 10rpx 0 20rpx 0;">
						</view>
						<view class="xmxi">
							{{ item.notice || '无通知内容' }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		defineComponent,
		ref,
		onMounted
	} from 'vue';
	import MyTabs from '../../components/Mymaintenance/My_maintenance.vue';
	// import {
	// 	uniNavigateTo
	// } from '@dcloudio/uni - next';
	export default defineComponent({
		components: {
			MyTabs
		},
		setup() {
			const myTabsData = ref({
				tabs: [{
						name: '客户动态',
						value: 0
					},
					{
						name: '任务消息',
						value: 1
					},
					{
						name: '项目消息',
						value: 2
					}
				],
				currentTab: 0,
				tabMessages: [2, 1, 3],
				notifications: []
			});

			const currentSelectedState = ref('项目消息');

			const customerDynamicDataArray = ref([{
					customerName: '王大锤',
					department: '网络部',
					company: '东阳市裕成礼品有限公司',
					question: '金蝶安装时提示组件传送错误，拒绝访问 需要怎么解决?',
					reply: '已经按照你你的方法试过了，还是不行，录了..',
					replyTime: '2024-05-20 12:37'
				},
				{
					customerName: '李小花',
					department: '市场部',
					company: '西阳市创新科技有限公司',
					question: '系统登录不上，提示密码错误，但密码是正确的，怎么办？',
					reply: '你可以尝试重置密码或者联系管理员看看。',
					replyTime: '2024-06-15 10:20'
				}
			]);

			const taskMessageDataArray = ref([{
				person: '张某某',
				action: '终止了任务',
				taskName: '利世CRM需求调研...',
				time: '2024-02-13 08:00:00'
			}]);

			const projectMessageDataArray = ref([{
					projectName: '银达生物',
					notice: '服务器租赁即将在2024年10-31日到期，请及时安排处理',
					time: '2024-09-30 08:00:00'
				},
				{
					projectName: '蓝天科技',
					notice: '项目进度提前，预计下周可完成全部任务，请做好相关准备。',
					time: '2024-10-15 14:00:00'
				}
			]);

			// 处理 tab 切换
			const handleTabChange = (newTabIndex) => {
				console.log("当前选项卡索引:", newTabIndex);
				myTabsData.value.currentTab = newTabIndex;
			};

			// 在组件挂载时初始化默认 tab
			onMounted(() => {
				console.log('当前默认 tab 索引:', myTabsData.value.currentTab);
			});

			function gotushijian(item) {
				console.log("跳转", item); // 打印点击的 item
				const params = {
					customerName: item.customerName,
					question: item.question,
					reply: item.reply
				};

				// 跳转页面并传递参数
				uni.navigateTo({
					url: '/pages/QuestionDetails/QuestionDetails?customerName=' + encodeURIComponent(params
							.customerName) +
						'&question=' + encodeURIComponent(params.question) +
						'&reply=' + encodeURIComponent(params.reply)
				});
			}

			return {
				myTabsData,
				currentSelectedState,
				customerDynamicDataArray,
				taskMessageDataArray,
				projectMessageDataArray,
				handleTabChange,
				gotushijian
			};
		}
	});
</script>
<style>
	/* 样式 */
	.new-page {
		background-color: #F6F6F6;
	}

	.ceshi {
		height: 100vh;
		padding: 30rpx;
	}

	.shuju {
		margin-top: 30rpx;
	}

	.box {
		background: #FFFFFF;
		padding: 30rpx;
		margin: 0 auto;
		border-radius: 16rpx;
		margin-top: 20rpx;
	}

	.top {
		display: flex;
	}

	.touxiang {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: blue;
	}

	.text_top {
		display: flex;
	}

	.bumen {
		width: 80rpx;
		height: 30rpx;
		background: #EBF0FF;
		border-radius: 15rpx;
		font-weight: 400;
		font-size: 18rpx;
		color: #4170FF;
		line-height: 30rpx;
		text-align: center;
		margin-left: 10rpx;
	}

	.tiwen {
		font-weight: bold;
		font-size: 26rpx;
		color: #222222;
		background: #F6F6F6;
		border-radius: 8rpx;
		padding: 12rpx 20rpx 14rpx 20rpx;
	}

	.date {
		margin-top: 18rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
	}

	.box_xxi {
		padding: 34rpx 50rpx 32rpx 50rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.logo {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: pink;
	}

	.topxmxi {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.biaoT {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		margin-left: 15rpx;
	}

	.ProjectMessages {
		background-color: #FFFFFF;
		padding: 18rpx 20rpx 28rpx 20rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.text_button {
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
	}

	.box_text {
		margin-left: 20rpx;
	}

	.datesj {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.xmxi {
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
	}
</style>